<template>
	<div class="pt-[10px]">
		<race-stat :data="data" :list="list" title="asd"></race-stat>
		<race-list :pageSize="pageSize"></race-list>
	</div>
</template>

<script setup lang="ts">
import RaceStat from './race-stat.vue'
import RaceList from './race-list.vue'
import { getRaceInfo } from '@/api/race'
import { useRequest } from '@/hooks'
import { RaceInfo, RaceItem } from '@/types'
import { ref } from 'vue'

defineProps({
	pageSize: {
		type: [Number, String],
		default: '10'
	}
})

const { run, data } = useRequest<RaceInfo>(getRaceInfo, {
	onSuccess: (data: RaceInfo) => {
		if (data.list) {
			list.value = data.list
		}
	}
	// onFinally: () => bus.$on(SOCKET_RACE_RANKING, onRankingMsg)
})

const list = ref<RaceItem[]>([])

// const onRankingMsg = (data: any) => {
// 	list.value = data.list
// }
//
// onBeforeUnmount(() => {
// 	bus.$off(SOCKET_RACE_RANKING, onRankingMsg)
// })

run()
</script>
